<!DOCTYPE html>
 <html lang="en">
 <!--模仿postman编写一个简易的http接口测试工具-->
 <head>
    <meta charset="UTF-8">
     <title>自定义HttpClient</title>
     <link rel='stylesheet prefetch' href='https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css'>
     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
     <link rel="stylesheet" href="test1.css">
    <script src="test1.js"></script>
 </head>
 <body>
 <div class="container">
     <div class="row">
         <h3 class="page-header">接口测试工具</h3>
         <div>
             <label>接口地址:</label>
             <input type="text" class="form-control" id="url_input"
                    value="http://localhost:8080/getStudentByIdWithJson">
             <!--<label>接口类型:</label><input type="text" class="form-control" id="type_input" value='POST'>-->
             <div>
                 <label>接口类型:</label>
                 <select id="type_select" class="selected form-select-button" style="height: 25px">
                     <option value="GET">GET</option>
                     <option value="POST" selected>POST</option>
                 </select>
             </div>
             <label>消息头:</label><input type="text" class="form-control" id="header_input" title='{"A":"XX","B":"XX"}'>
              <label>消息体:</label>
             <div>
                 <input name="bodyType" type="radio" value="form">&nbspForm&emsp;
                <input name="bodyType" type="radio" value="json" checked>&nbspJSON
             </div>
            <input type="text" class="form-control" id="body_input" value='{"id":"1"}'>
        </div>

         <div class="btn-group">
             <button type="submit" class="btn btn-primary" title="发送消息" onclick="send()">发送</button>
             <button type="reset" class="btn btn-primary" title="刷新页面" onclick="location.reload()">刷新</button>
             <button type="reset" class="btn btn-primary" title="清空查询结果" onclick="clearShowArea()">清空</button>
             <button type="reset" class="btn btn-primary" title="跳转首页" onclick="location.href='/'">首页</button>
         </div>

         <div>
            <label>返回结果:</label>
             <div class="well" >
                 <p id="showArea" @click=""></p>
            </div>
         </div>
     </div>

     <div class="btn-group">
        <button type="submit" class="btn btn-primary" title="Base64解码" @click="base64Encode()">Base64解码</button>
        <button type="reset" class="btn btn-primary" title="JSON格式化" @click="jsonFormat()">JSON格式化</button>
        <button type="reset" class="btn btn-primary" title="URL解码" @click="urlEncode()">URL解码</button>
        <button type="reset" class="btn btn-primary" title="转换为实体" @click="htmlEncode()">转换为实体</button>
        <button type="reset" class="btn btn-primary" title="复制响应" data-clipboard-target=".response">复制响应</button>
        <button type="reset" class="btn btn-primary" title="保存响应" @click="download()">保存响应</button>
    </div>

</div>
 </div>
 

 <script>
   
    const app = Vue.createApp({
         data() {
                return {
                    result: '',
                }
            },
        methods: {
            base64Encode() {
                if (!this.result) {
                    alert('响应内容为空，请先请求数据')
                    return
                }
                try {
                    this.result = window.atob(this.result)
                } catch {
                    alert('解码失败')
                }
            },
            urlEncode() {
                if (!this.result) {
                    alert('响应内容为空，请先请求数据')
                    return
                }
                try {
                    this.result = decodeURIComponent(this.result)
                } catch {
                    alert('解码失败')
                }
            },
            htmlEncode() {
                var ele = document.createElement('div')
                ele.innerText = this.result
                this.result = ele.innerHTML
            },
            jsonFormat() {
                if (!this.result) {
                    alert('响应内容为空，请先请求数据')
                    return
                }
                try {
                    this.result = JSON.stringify(JSON.parse(this.result), null, 4)
                } catch {
                    alert('格式化失败')
                }
            },
            download() {
                if (!this.result) {
                    alert('响应内容为空，请先请求数据')
                    return
                }
                var filename
                try {
                    var url = new URL(this.input.url)
                    filename = url.pathname.split('/')
                    filename = filename[filename.length - 1] + '_' + new Date().getTime() + ".txt"
                } catch {
                    filename = new Date().getTime() + ".txt"
                }
                filename = 'response_' + filename
                var blob = new Blob([this.result], { type: "text/plain; charset=utf-8" })
                saveAs(blob, filename)
            },
            test_cors_url() {
                axios.request({
                    method: 'get',
                    url: this.cors_url
                }).then((response) => {
                    alert('GET支持跨域')
                }).catch(function (error) {
                    alert('GET请求失败，原因：\n' + error)
                })
            }
        }
    })
    const vm = app.mount('#app')
</script>

 </body>
 </html>